<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="This tutorial demonstrates how to create a layout widget."><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Create a new layout widget
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-FDDF9BBD-9F7B-49F1-A76B-633BB1B9DC9C]--><body><div id="content"><div class="header"><h1>
Create a new layout widget
</h1><div id="breadcrumb"></div></div>
<p id="GUID-EB6A9FDF-05F8-409E-9BEE-AAAF5E3CE704">This tutorial demonstrates how to create a new header widget to brand the  app with the following information:</p><ul purpose="ul" id="UL_E409DB9956B345BEBAA1874C53304DA9"><li purpose="li" id="GUID-AEC60451-D788-43BC-88F7-EC90F2105588">Logo</li><li purpose="li" id="GUID-0C890E0C-F50F-479E-8B4D-259966248B24">Main title</li><li purpose="li" id="GUID-A0F3C739-D508-4D61-B0BD-F38BCA0161ED">Sub title</li><li purpose="li" id="GUID-70079C84-FAD5-41F4-8C74-E37FF833E708">Links</li></ul><div class="section1" id="GUID-A6D0641F-A2AB-4F0A-BD7F-310A118BBC43" purpose="section1"><h2>Create a new layout widget folder structure</h2><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="GUID-261B0C71-D985-4123-9153-0DB3CA4BFFCD"><div class="step_title">Steps:</div><ol><li purpose="step" id="GUID-D6FC2D61-8709-4484-AF55-D4A81FCBCCCC"><span purpose="cmd" id="GUID-61E21AE0-5909-4D4A-8474-92ACAF8F53D9">Open    the DemoTheme folder from <span class="usertext">~/client/stemapp/themes</span>.</span></li><li purpose="step" id="GUID-DE0EE4AB-1DA7-4ACD-BB36-C49FF648F3DA"><span purpose="cmd" id="GUID-E7F31EA8-09A7-4A1E-9E24-11819A0499CF">Create a new folder and name it <span class="usertext">widgets</span> if a widgets folder does not already exist.</span></li><li purpose="step" id="GUID-ABE5486A-26E5-483F-86AA-BF07729D838D"><span purpose="cmd" id="GUID-B9411550-6D9A-4514-B372-6265066ED385">Copy the Demo folder from <span class="usertext">~/client/stemapp/widgets/samplewidgets</span> to the widgets folder and change its name to <span class="usertext">Header</span>. The widgets folder should similar to the following:</span><div class="stepexample" purpose="stepexample"><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-C899EE0D-C5A4-4DFD-8EE9-81CF7D2B157B-web.png" purpose="img" alt="widgets folder" title="widgets folder"></td></tr></table></div><div class="notes" id="GUID-76BE6C0F-7447-4D0F-9407-8E906337BBA7"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-0F88F1A0-F96F-4C61-8B50-E02C8F81F638">The Demo folder provides all the required files and folders to create a custom widget.</p></div></div></div></li><li purpose="step" id="GUID-75D96C08-A226-4486-8E0B-7176B9872565"><span purpose="cmd" id="GUID-C1A0E074-C04D-4E97-803F-CAE46FDAE62F">Update the general information for the widget, such as  its name and label in the manifest.json and nls/string.js files as needed.</span></li><li purpose="step" id="GUID-976A2700-6247-4963-808E-2E7AB918A456"><span purpose="cmd" id="GUID-023F4C1C-3F34-4AF4-B948-FAA6969FC1A1">In manifest.json, add the following properties to inform Web AppBuilder that this is a layout widget:</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&quot;properties&quot;: {
    &quot;inPanel&quot;: false,

    &quot;isThemeWidget&quot;: true
  }
</code></pre></div>
</div></div></li></ol></div></div></div><div class="section1" id="GUID-447B6379-9C2A-4F64-9019-921AADF26E3D" purpose="section1"><h2>Add Header widget to the default layout</h2><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="GUID-3898DB3B-4E37-46A0-939E-8FFEF4BAFD13"><div class="step_title">Steps:</div><ol><li purpose="step" id="GUID-A27C92CA-EAF8-447C-A3A6-25BA482A876C"><span purpose="cmd" id="GUID-4D58E038-EEC9-4DFC-9ED1-58562238F3C9">Open config.json from the <span class="usertext">~/client/stemapp/themes/DemoTheme/layouts/default</span> folder.</span></li><li purpose="step" id="GUID-9F9FCE7B-4DF5-4FEB-9536-B05C0079DA6B"><span purpose="cmd" id="GUID-56EBD455-E855-4912-91D8-7FBB33E7A6DE">Add the following configuration to the widgets array in the widgetOnScreen section:</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>{
  &quot;uri&quot;: &quot;themes/DemoTheme/widgets/Header/Widget&quot;,
  &quot;position&quot;: {
    &quot;left&quot;: 0,
    &quot;top&quot;: 0,
    &quot;right&quot;: 0,
    &quot;height&quot;: 50,
    &quot;relativeTo&quot;: &quot;browser&quot;
  }
}
</code></pre></div>
</div><p id="GUID-D8E7B9D6-7D20-47B6-BE9F-BE2801FB6885">The Header is placed at the top of the screen with a height of 50 pixels and  a width of 100 percent of the browser window.</p></div></li><li purpose="step" id="GUID-3AC3D070-4412-4386-AE86-5465B8F70B72"><span purpose="cmd" id="GUID-F02BF6F0-E702-48B7-8409-4F64AE2C3C1D">Change the top property of the map to 50 to make space for the Header widget.</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&quot;map&quot;: {
    &quot;position&quot;: {
      &quot;left&quot;: 50,
      &quot;top&quot;: 50,
      &quot;right&quot;: 0,
      &quot;bottom&quot;: 0
    }
  },
</code></pre></div>
</div></div></li><li purpose="step" id="GUID-7AA856B9-E938-464E-A2CE-529023D25A67"><span purpose="cmd" id="GUID-2CEA2779-7121-48F6-8CE5-18EDBE7A6BB2">Reload the Web AppBuilder app, and choose the Demo theme. The Header widget is added as shown below.</span><div class="stepexample" purpose="stepexample"><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-897CA33C-1B5F-4A21-8EBA-91E7EF137C30-web.png" purpose="img" alt="Header widget" title="Header widget"></td></tr></table></div><div class="notes" id="GUID-ABB29BAB-10A3-47D3-B5CE-89B33727395C"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-75397A4E-A3CE-4F11-9556-08734649FC21">The Header widget still displays the sample content from the Demo widget, and there are no styles added yet.</p></div></div></div></li></ol></div></div></div><div class="section1" id="GUID-73295174-BE43-4A4B-A296-B9FAF476A979" purpose="section1"><h2>Customize the header template</h2><p id="GUID-47DD64A5-3DCF-47BE-899A-4E4133B75C19">The widget.html file contains the HTML structure of the widget. In this section, you'll remove the sample HTML elements from the Demo widget and add new elements or logos, titles, and links.</p><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="GUID-3E70AF6E-4129-4C36-8F3C-1E83294D2522"><div class="step_title">Steps:</div><ol><li purpose="step" id="GUID-B132EAA8-B827-4D5D-AA09-E39CBB3EAB51"><span purpose="cmd" id="GUID-6DCCAF4C-3876-4E81-9CCA-CEEF8ECEEA79">Open widget.html in the Header folder and replace the content with the following:</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&lt;div&gt;
	&lt;div class=&quot;jimu-widget-header-inner&quot;&gt;
		&lt;div class=&quot;logo&quot; data-dojo-attach-point=&quot;logoWrapperNode&quot;&gt;
			&lt;img data-dojo-attach-point=&quot;logoNode&quot;&gt;
		&lt;/div&gt;
		&lt;div class=&quot;titles jimu-leading-margin1&quot; data-dojo-attach-point=&quot;titlesNode&quot;&gt;
			&lt;div class=&quot;jimu-title&quot; data-dojo-attach-point=&quot;titleNode&quot;&gt;&lt;/div&gt;
			&lt;div class=&quot;jimu-subtitle jimu-leading-margin2&quot; data-dojo-attach-point=&quot;subtitleNode&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;links&quot; data-dojo-attach-point=&quot;linksNode&quot;&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
</div><div class="notes" id="GUID-D30BFD8C-3CCB-4EB6-8D63-E8424670F3E8"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-3D20F370-CA98-44C0-BD37-A24A5F18A21F">Class names such as <span class="usertext">jimu-title</span> and <span class="usertext">jimu-leading-margin1</span> are predefined in the Jimu’s CSS framework.</p></div></div></div></li></ol></div></div></div><div class="section1" id="GUID-13161597-6421-49F7-8289-3D2D73619230" purpose="section1"><h2>Customize the header widget</h2><p id="GUID-8B21C01F-1E18-4F1B-8A37-B9574381F3F2">The widget.js file contains the basic widget life cycle methods such as postCreate and startup, and event handlers such as onSignIn and onSignOut.</p></div><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="ESRI_STEPS_054B333F3762444A8E97ADA7DB5A7ECA"><div class="step_title">Steps:</div><ol><li purpose="step" id="ESRI_STEP_1863C56C4F87489987AD692951052D1D"><span purpose="cmd" id="GUID-CAA10286-30B0-4B0C-B1D1-0B6AADDBF0A5">Set the widget’s base class name or names.</span><div class="info" purpose="info"><p id="GUID-BDBFE3F9-FA60-4A7B-8B3E-D35242820C3F">Find the <span class="usertext">baseClass</span> property and change its name to <span class="usertext">jimu-widget-header</span>. This class name will help  target the header widget when you define the CSS styles for it. Add another class called <span class="usertext">jimu-main-background</span> from the Jimu CSS framework to help create multiple styles.</p><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>baseClass: &#39;jimu-widget-header jimu-main-background&#39;,
</code></pre></div>
</div></div></li><li purpose="step" id="ESRI_STEP_EDCEC968A1D04C53A5E5DAE67EEFF585"><span purpose="cmd" id="GUID-EF08B638-47BC-43DA-97F1-21218778FB26">Remove unused event handlers.</span><div class="info" purpose="info"><p id="GUID-9FDB8CCF-F16F-4220-A0BD-24FE03624FA9">Remove the following event handlers since they don't apply to the Header widget:</p><ul purpose="ul" id="UL_BDAEF53F023E45F6A095BAAF9272FB69"><li purpose="li" id="LI_610BB2AAF09D4266A1A304D610A93E2C">onOpen</li><li purpose="li" id="LI_02A3E48CBCE44967A5FE3A70956B9F48">onClose</li><li purpose="li" id="LI_3CB998EB553D4DD186FC9576ECE7712A">onMinimize</li><li purpose="li" id="LI_48055211DD1141E9835BA5F6633AE01B">onMaximize</li><li purpose="li" id="LI_75C9CDB9B885490F85AE10E728862AFC">onSignIn</li><li purpose="li" id="LI_D1C0A45D5EC045AA961CBC3E550319F4">onSignOut</li></ul></div></li><li purpose="step" id="ESRI_STEP_605BF9A80CCD45C59D1584CD43DC104D"><span purpose="cmd" id="GUID-BBE31863-CCB2-4938-AE51-EE977658F88A">Remove unused sample code.</span><div class="info" purpose="info"><p id="GUID-C8A0B293-AF7F-4583-B473-1E4F471CEE49">Remove the following code from the <span class="usertext">startup</span> method:<div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="k">this</span><span class="p">.</span><span class="nx">mapIdNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;map id:&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
</code></pre></div>
</div></p></div><div class="stepresult" purpose="stepresult"><p id="GUID-F16345DF-3EDC-4FD7-907C-7AAEA0906DA0">Open Web AppBuilder, create a new app, and choose the Demo theme. The header displays as a   bar at the top of the screen with no content.</p><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-ECF27BF1-7FD4-48C4-BE78-D6F0D114E020-web.png" purpose="img" alt="Header widget with no content" title="Header widget with no content"></td></tr></table></div></div></li><li purpose="step" id="ESRI_STEP_67C41A2C21C441359F0BD1CC25076ACF"><span purpose="cmd" id="GUID-A38B9155-C70F-4817-9E0A-6CB55257B235">Read the app’s config file, and populate the logo, titles, and links.</span><div class="substeps" id="ESRI_SUBSTEPS_49CEF41740CB43BC91978F54373A60E8" purpose="substeps"><ol><li purpose="substep" id="ESRI_SUBSTEP_718F7AF599BE4D68A50C1102AE0D9B03"><span purpose="cmd" id="GUID-8A7B9997-5C48-4236-BC85-049A299D9E23">Create a simple method called <span class="usertext">_initUI</span> to populate the UI for the Header widget by reading properties from the app’s config file.</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="nx">_initUI</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// set logo</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">alt</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">;</span>
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="c1">// set title</span>
  <span class="k">if</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">titleNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="c1">// set subtitle</span>
  <span class="k">if</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">subtitle</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">subtitleNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">subtitle</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="c1">// add links</span>
  <span class="k">if</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">links</span> <span class="o">&amp;&amp;</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">linkConfig</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
      <span class="kd">var</span> <span class="nx">linkNode</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
      <span class="nx">linkNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">linkConfig</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
      <span class="nx">linkNode</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;jimu-link&#39;</span><span class="p">;</span>
      <span class="nx">linkNode</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">linkConfig</span><span class="p">.</span><span class="nx">url</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">linksNode</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">linkNode</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
</div></div></li><li purpose="substep" id="ESRI_SUBSTEP_BC1A2A1E2CDA43AA9BE13F2C66F32ECE"><span purpose="cmd" id="GUID-B12E769F-535E-4DDE-9EA2-4D1E5A83D5E6">In the <span class="usertext">postCreate</span> method, get the app’s configuration by calling <span class="usertext">this.appConfig</span>, which is inherited from the <span class="usertext">jimu/BaseWidget</span> class,  and pass it in as a parameter in <span class="usertext">this._initU</span>.</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">_initUI</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
</div></div></li></ol></div></li></ol></div></div><div class="section1" id="GUID-484AEB9D-C974-4517-9DDF-1835070CD8C7" purpose="section1"><h2>Add CSS styles</h2><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="GUID-0D2F33E4-DE81-4A00-BA99-E51665B1986E"><div class="step_title">Steps:</div><ol><li purpose="step" id="GUID-6453EF45-2DFF-4E2F-99DE-9F6DA9685CB2"><span purpose="cmd" id="GUID-4C0DF524-DCC6-48A0-B9BA-97CC87F14C1D">Open style.css from <span class="usertext">~/client/stemapp/themes/DemoTheme/widgets/Header/css</span>.</span></li><li purpose="step" id="GUID-B7538F46-B22E-4AC7-BE73-3AF1AC21A5D1"><span purpose="cmd" id="GUID-C285AB09-17CD-42B7-8439-76C3E25FF088">Add the following styles to align elements in the Header widget property:</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span><span class="o">-</span><span class="nx">inner</span> <span class="p">{</span>
  <span class="nx">display</span><span class="o">:</span> <span class="nx">table</span><span class="p">;</span>
  <span class="nx">width</span><span class="o">:</span> <span class="mi">100</span><span class="o">%</span><span class="p">;</span>
  <span class="nx">height</span><span class="o">:</span> <span class="mi">100</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span><span class="o">-</span><span class="nx">inner</span> <span class="o">&gt;</span> <span class="o">*</span> <span class="p">{</span>
  <span class="nx">display</span><span class="o">:</span> <span class="nx">table</span><span class="o">-</span><span class="nx">cell</span><span class="p">;</span>
  <span class="nx">vertical</span><span class="o">-</span><span class="nx">align</span><span class="o">:</span> <span class="nx">middle</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">logo</span> <span class="p">{</span>
  <span class="nx">width</span><span class="o">:</span> <span class="mi">50</span><span class="nx">px</span><span class="p">;</span>
  <span class="nx">padding</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">10</span><span class="nx">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">logo</span> <span class="nx">img</span> <span class="p">{</span>
  <span class="nx">max</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span> <span class="mi">30</span><span class="nx">px</span><span class="p">;</span>
  <span class="nx">vertical</span><span class="o">-</span><span class="nx">align</span><span class="o">:</span> <span class="nx">middle</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">titles</span> <span class="p">{</span>
  <span class="nx">width</span><span class="o">:</span> <span class="mi">100</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">title</span><span class="p">,</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">subtitle</span> <span class="p">{</span>
  <span class="nx">display</span><span class="o">:</span> <span class="nx">inline</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">widget</span><span class="o">-</span><span class="nx">header</span> <span class="p">.</span><span class="nx">jimu</span><span class="o">-</span><span class="nx">link</span> <span class="p">{</span>
  <span class="nx">padding</span><span class="o">:</span> <span class="mi">10</span><span class="nx">px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
</div></div></li><li purpose="step" id="ESRI_STEP_E6CFCBADED94469A8EA55302502F6BBF"><span purpose="cmd" id="GUID-28911992-FC53-4000-92C0-01D13466FE05">Open Web AppBuilder, create a new app, choose the Demo theme, and add a few links as shown below.<div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-1616C3CC-5E34-4108-AD9C-936D1FCEC7F8-web.png" purpose="img" alt="Add links" title="Add links"></td></tr></table></div></span></li></ol></div></div></div><div class="section1" id="GUID-9FAA6883-CC5D-4066-8575-FBF6FCBAD4A1" purpose="section1"><h2>Add onAppConfigChanged event handler</h2><p id="GUID-BC2305D0-FDC5-47B4-BA2C-55D95B4A741D">The <span class="usertext">onAppConfigChanged</span> method from the <span class="usertext">jimu/BaseWidget</span> class handles the event when an app’s configuration has been changed. It enables  the app in the preview section to reflect the configuration changes dynamically.</p><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="steps" id="GUID-A5EE5858-2FC6-4AA7-968C-7AEA650D830B"><div class="step_title">Steps:</div><ol><li purpose="step" id="GUID-B2C4A5AE-531A-4714-98F8-312937E6A0B4"><span purpose="cmd" id="GUID-B1DF0E8E-CDE1-4506-B05C-062689C4C477">Add <span class="usertext">onAppConfigChanged</span> as a new method in widget.js.</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="nx">onAppConfigChanged</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">changedData</span><span class="p">)</span> <span class="p">{</span>
<span class="p">},</span>
</code></pre></div>
</div><p id="GUID-DD9DDAFE-4589-4D98-8143-518CF1B3A874">The following  parameters are passed in the method:</p><ul purpose="ul" id="UL_4C5C14CB5D2241A79E543433AA23FEA4"><li purpose="li" id="GUID-7D651D39-ADD1-4469-A74F-6E16BFFB00B2">appConfig—The updated appConfig</li><li purpose="li" id="GUID-B624CBE2-C07A-45D2-B88C-482ED5BE4B5B">reason—Either <span class="usertext">attributeChange</span> or <span class="usertext">widgetChange</span></li><li purpose="li" id="GUID-DC4F5CB9-C5C6-41C4-8F71-68EBDAB4F177">changedData—Details about the updated data</li></ul></div></li><li purpose="step" id="GUID-5CFF5C40-963C-43D8-B4DE-653D7DB3DA59"><span purpose="cmd" id="GUID-823BBCCF-7D82-4C77-A6C0-BB35FB547BF8">Check  the reason parameter. If it's <span class="usertext">attributeChange</span>, update the logo and titles, and re-create links.</span><div class="stepexample" purpose="stepexample"><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="nx">onAppConfigChanged</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">appConfig</span><span class="p">,</span> <span class="nx">reason</span><span class="p">,</span> <span class="nx">changedData</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">reason</span> <span class="o">&amp;&amp;</span> <span class="nx">reason</span> <span class="o">===</span> <span class="s1">&#39;attributeChange&#39;</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// update logo</span>
    <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;logo&#39;</span> <span class="k">in</span> <span class="nx">changedData</span> <span class="o">&amp;&amp;</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">logo</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">changedData</span><span class="p">.</span><span class="nx">logo</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">alt</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">.</span><span class="nx">logo</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s1">&#39;src&#39;</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s1">&#39;alt&#39;</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logoNode</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="c1">// update title</span>
    <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;title&#39;</span> <span class="k">in</span> <span class="nx">changedData</span> <span class="o">&amp;&amp;</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">title</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">titleNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c1">// update subtitle</span>
    <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;subtitle&#39;</span> <span class="k">in</span> <span class="nx">changedData</span> <span class="o">&amp;&amp;</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">subtitle</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span><span class="p">.</span><span class="nx">subtitle</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">subtitleNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">subtitle</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c1">// recreate links</span>
    <span class="k">if</span> <span class="p">(</span><span class="s1">&#39;links&#39;</span> <span class="k">in</span> <span class="nx">changedData</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">linksNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
      <span class="k">if</span><span class="p">(</span><span class="nx">changedData</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
          <span class="kd">var</span> <span class="nx">linkConfig</span> <span class="o">=</span> <span class="nx">changedData</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
          <span class="kd">var</span> <span class="nx">linkNode</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
          <span class="nx">linkNode</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">linkConfig</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
          <span class="nx">linkNode</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;jimu-link&#39;</span><span class="p">;</span>
          <span class="nx">linkNode</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">linkConfig</span><span class="p">.</span><span class="nx">url</span><span class="p">;</span>
          <span class="k">this</span><span class="p">.</span><span class="nx">linksNode</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">linkNode</span><span class="p">);</span>
        <span class="p">}</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">appConfig</span> <span class="o">=</span> <span class="nx">appConfig</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
</div></div></li><li purpose="step" id="GUID-8BFDC578-43E2-4C3A-B45A-DF86BA5C146F"><span purpose="cmd" id="GUID-3BB30B32-0485-427B-8C0A-EC4E4EA72641">Open Web AppBuilder,  choose a different logo, update titles, or add or remove a link. </span><div class="stepresult" purpose="stepresult"><p id="GUID-4603523B-62B1-4EDD-93DE-0342DA482E38">The preview app reflects the changes dynamically.</p></div></li></ol></div></div></div>
<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>